<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>酱油BBS——个人信息</title>
    <link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="myInfo.css">
    <script src="jquery-1.11.1.min.js"></script>
    <script src="jquery-2.1.4.min.js"></script>
    <script src="bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation"style="position:fixed">
    <div class="container-fluid">
        <img src="image/logo.png" class="img-responsive" alt="Responsive image" style="height: 55px;display: inline-block;">
        <p style="display: inline-block;font-size: 32px;font-family:STXingkai;margin-bottom: 0;margin-top: 5px;margin-left: 5px">酱油BBS——个人信息</p>
        <ul class="nav nav-tabs">
            <li><a href="#">论坛主页</a></li>
            <li><a href="#">消息通知</a></li>
            <li><a href="#">个人信息</a></li>
        </ul>
    </div>
</nav>
<div class="content">
    <div class="username">
        用户名：
        <input type="text" value="Ashes" readonlystyle="margin-left: 18px">
    </div>
    <div class="header">
        个人头衔：&nbsp;<span class="data">LV3</span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="data">版主</span>
    </div>
    <div class="count">
        发帖数：<span class="data">777</span>
    </div>
    <div class="icon">
        <span style="display: inline-block"> 用户头像：</span>
        <input type="file" name="image" accept="image/jpeg,image/jpg,image/png,image/gif,image/bmp" id="headscup" style="display: inline-block;" disabled>
    </div>

    <div class="password">
        密码：
        <input type="password" value="Ashes"  style="margin-left: 36px" readonly>
    </div>
    <div class="tel">
        手机号：

        <input type="text" value="111111111" style="margin-left: 18px" readonly>
    </div>
    <div class="mail">
        邮箱：
        <input type="text" value="1258502196@qq.com"  style="margin-left: 36px" readonly>
    </div>
    <div class="birth">
       生日：
       <input type="date" value="1997-11-01"  style="margin-left: 36px" readonly>
    </div>
    <div class="motto">
        个性签名：
        <input type="text" value="hello"  readonly="readonly">
    </div>
    <div class="summary">
        <span style="position: relative;bottom: 82px;">个人简介：</span>
        <textarea type="text"  readonly="readonly">dfajfjdasksd&#10;fasdfasdf</textarea><!--html文本内部用&#10;来作为换行符-->
    </div>
    <button type="submit" value="submit">
        提交
    </button>
    <button type="submit" style="margin-left: 290px" value="edit" id="edit">
       编辑
    </button>
    <div class="view">
        <img id="graph" src="../header_images/github7.jpg" >
    </div>
</div>
<script type="text/javascript">
    $("#edit").on("click", function () {
        $(".icon input").removeAttr("disabled");
        $(".password input").removeAttr("readonly");
        $(".tel input").removeAttr("readonly");
        $(".mail input").removeAttr("readonly");
        $(".birth input").removeAttr("readonly");
        $(".motto input").removeAttr("readonly");
        $(".summary input").removeAttr("readonly");
        $(".summary textarea").removeAttr("readonly");
    })
    $(function() {
        $("#show").change(function() {
            var $file = $(this);
            var fileObj = $file[0];
            var windowURL = window.URL || window.webkitURL;
            var dataURL;
            var $img = $("#graph");

            if(fileObj && fileObj.files && fileObj.files[0]){
                dataURL = windowURL.createObjectURL(fileObj.files[0]);
                $img.attr('src',dataURL);
            }else{
                dataURL = $file.val();
                var imgObj = document.getElementById("graph");
                imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;

            }
        });
    });
</script>
</body>
</html>